<template>
  <div class="setup-props-context-course">
    <h2>组合式 API：setup 参数 props 与 context</h2>
    <p class="intro">
      本示例演示如何在 <code>setup(props, context)</code> 中使用 props 接收父组件数据，并通过 context 触发事件。
    </p>

    <section class="demo">
      <h3>交互演示</h3>
      <SetupPropsContext username="VueLearner" @send-message="onMessage" />
      <p v-if="received" class="received">收到子组件消息：{{ received }}</p>
    </section>

    <section class="tips">
      <h3>关键要点</h3>
      <ul>
        <li><code>setup(props, context)</code> 接收两个参数。</li>
        <li><code>props</code> 是响应式的，解构会失去响应式。</li>
        <li><code>context</code> 包含 <code>emit</code>、<code>slots</code>、<code>attrs</code> 等。</li>
      </ul>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SetupPropsContext from '@/components/zuheapi/setupfunctionpropscontext.vue'

const received = ref(null)

function onMessage(payload) {
  received.value = JSON.stringify(payload)
}
</script>

<style scoped>
.setup-props-context-course {
  padding: 24px;
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
h2 {
  margin-top: 0;
  color: #42b883;
}
.intro {
  line-height: 1.6;
  color: #555;
}
.demo {
  margin: 24px 0;
  padding: 16px;
  background: #f7f8fa;
  border-radius: 6px;
}
.received {
  margin-top: 12px;
  color: #333;
  font-weight: bold;
}
.tips ul {
  padding-left: 20px;
  line-height: 1.8;
}
code {
  background: #f1f1f1;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', Courier, monospace;
}
</style>